<template>
  <div class="p-4">
    <el-card class="box-card">
      <div slot="header" class="clearfix ">
        <div class="flex">
          <el-input
            class="ml-4 mr-2"
            style="width:220px"
            placeholder="请输入礼物名称"
            v-model="listQuery.gift_name"
            clearable
          ></el-input>
          <el-button
            @click="getList"
            type="primary"
            size="small"
            class="el-icon-search cursor-pointer"
            >搜索</el-button
          >
        </div>
      </div>

      <el-table :data="data" border>
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="id" label="序号" width="150px"></el-table-column>
        <el-table-column prop="gift_name" label="礼物名称"></el-table-column>
        <el-table-column prop="gift_id" label="礼物id"></el-table-column>
        <el-table-column prop="gift_picture" label="礼物图片">
          <template slot-scope="{ row }">
            <el-popover placement="right" max-width="420" trigger="hover">
              <img
                :src="row.gift_picture"
                alt=""
                style="max-width: 200px; max-height: 200px"
              />
              <img
                slot="reference"
                :src="row.gift_picture"
                alt=""
                style="width: 50px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="gift_status" label="当前状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.gift_status === 1"
              >上架</el-tag
            >
            <el-tag type="danger" v-else>下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作类型">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.action === 1">上架</el-tag>
            <el-tag type="danger" v-else>下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="set_time" label="上下架时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status === 1">已执行</el-tag>
            <el-tag type="danger" v-else>未执行</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              plain
              size="mini"
              icon="el-icon-delete"
              @click="deBounceWrap(handleDel, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <cus-pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getList"
      />
    </el-card>

    <!-- 删除弹框 -->
    <el-dialog
      title="确定删除吗?"
      :visible.sync="deleteDialogVisible"
      width="435px"
    >
      <span style=""
        ><em style="font-style: normal; color: red">删除后不可恢复</em
        >，你还要继续吗？</span
      >
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getListApi, delGiftList } from "@/api/roomGift/timedGift";
export default {
  data() {
    return {
      data: [],
      listQuery: {
        gift_name: undefined,
        page: 1,
        page_size: 10
      },
      total: 0,
      rowData: {},

      //删除
      deleteDialogVisible: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //列表
    getList() {
      getListApi(this.listQuery).then(res => {
        this.data = res.data.data;
        this.total = res.data.total;
      });
    },
    // 删除
    handleDel(row) {
      this.dataIds = { id: `${row.id}` };
      this.deleteDialogVisible = true;
    },
    // 确定删除
    confirmDelete() {
      delGiftList(this.dataIds).then(response => {
        if (response.code === 200) {
          this.getList();
          this.deleteDialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功"
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
/deep/ .el-upload-list__item {
  transition: none !important;
}

/deep/ .el-upload-list--picture {
  max-height: 103px !important;
  overflow: hidden;
}

/deep/ .el-upload-list--text {
  max-height: 100px !important;
  overflow: hidden;
}

/deep/ .el-upload-list__item-name {
  white-space: normal !important;
}
</style>
